<template>
	<div class="home-tab">
		<router-view :homeSelect="select" :toast="toast"></router-view>
		<footer>
			<ul class="clearFix">
				<li :class="[actives['index']?'active':'','home']"> 
					<router-link :to="{name: 'Index',query: {homeSelect:'index'}}">
					<h2></h2> <p>首页</p>
				</router-link> </li>
				<li  :class="[actives['orders']?'active':'','order']"> 
					<router-link :to="{name: 'Orders',query: {homeSelect:'orders'}}">
					<h2></h2> <p>订单管理</p>
				</router-link> </li>
				<li  :class="[actives['personal']?'active':'','personal']"> 
					<router-link :to="{name: 'Personal',query: {homeSelect:'personal'}}">
					<h2></h2> <p>个人中心</p>
				</router-link> </li>
			</ul>
		</footer>
	</div>
</template>

<script>
	
	export default {
		name: 'home',
		data() {
			return {
				actives:{"index":true}
			}
		},
		props:['toast'],
		methods: {
			select(key){
				let newActives = {};
				Object.keys(this.actives).forEach(item=>{
					newActives[item] = false;
				});
				newActives[key] = true;
				this.actives = {...newActives};
			}
		},
		mounted(){
			if(this.$route.query.homeSelect){
				this.actives[this.$route.query.homeSelect] = true;
			}else{
				this.actives['index'] = true;
			}
			this.actives = {...this.actives};
		}
	}
</script>

<style lang="scss">
.home-tab{
	padding-bottom: 60px;
	background: #f5f5f5;
	height: 100%;
	overflow: auto;
	-webkit-overflow-scrolling: touch;
	
	footer{
		position: fixed;
		bottom: 0;
		left: 0;
		right: 0;
		height: 50px;
		background: #4a5154;
		z-index: 999;
		
		ul{
	    width: 100%;
	    height: 100%;
	    li{
	    	width: 33.33%;
				float: left;
				height: 100%;
				cursor: pointer;
				background: #4a5154;
				
				&.home{
					h2{
						background: transparent url(../assets/img/icon/home-h-2.png) no-repeat center / auto 20px;
					}
				}
				&.home.active{
					h2{
						background: transparent url(../assets/img/icon/home-h-1.png) no-repeat center / auto 20px;
					}
				}
				&.order{
					h2{
						background: transparent url("../assets/img/icon/home-order-2.png") no-repeat center/ auto 20px;
					}
				}
				&.order.active{
					h2{
						background: transparent url("../assets/img/icon/home-order-1.png") no-repeat center/ auto 20px;
					}
				}
				&.personal{
					h2{
						background: transparent url("../assets/img/icon/home-personal-2.png") no-repeat center/ auto 20px;
					}
				}
				&.personal.active{
					h2{
						background: transparent url("../assets/img/icon/home-personal-1.png") no-repeat center/ auto 20px;
					}
				}
				&.active a p{
						color: #fefeff;
				}
				a{
					display: block;
					width: 100%;
					height: 100%;
					
					h2{
						width: 100%;
						height: 33px;
					}
					p{
						width: 100%;
						line-height: 14px;
						font-size: 13px;
						text-align: center;
						color: #979797;
					}
					
				}
			}
		}
	}
}
</style>
